<template>
  <vcu-tabs class="demo-pull-refresh">
    <vcu-tab title="基础用法">
      <vcu-pull-refresh v-model="loading" @refresh="onRefresh(true)">
        <p>{{ tips }}</p>
      </vcu-pull-refresh>
    </vcu-tab>

    <vcu-tab title="成功提示">
      <vcu-pull-refresh
        v-model="loading"
        success-text="刷新成功"
        @refresh="onRefresh(false)"
      >
        <p>{{ tips }}</p>
      </vcu-pull-refresh>
    </vcu-tab>

    <vcu-tab title="自定义提示">
      <vcu-pull-refresh
        v-model="loading"
        head-height="80"
        @refresh="onRefresh(true)"
      >
        <template #pulling="{ distance }"> 提示1 {{distance}} </template>
        <template #loosing> 提示2 </template>
        <template #loading> 提示3 </template>
        <p>{{ tips }}</p>
      </vcu-pull-refresh>
    </vcu-tab>
  </vcu-tabs>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";

const count = ref(0);
const loading = ref(false);

const tips = computed(() => {
  if (count.value) {
    return `刷新次数: ${count.value}`;
  }
  return "下拉试试";
});

const onRefresh = (showToast: boolean) => {
  setTimeout(() => {
    if (showToast) {
      console.info("刷新成功");
    }
    loading.value = false;
    count.value++;
  }, 1000);
};
</script>

<style lang="less">
.demo-pull-refresh {
  background-color: white;

  .vcu-pull-refresh {
    height: calc(100vh - 50px);
  }

  p {
    margin: 0;
    padding: 16px 0 0 16px;
  }
}
</style>
